<template>
  <div class="chooseIcons">
    <el-popover placement="bottom" width="450" trigger="click">
      <el-input slot="reference" :prefix-icon="whichIcon" v-model="whichIcon" placeholder="点击选择图标" />
      <div class="iconList" >
        <i
          v-for="item in iconList"
          :key="item"
          :class="item"
          @click="setIcon(item)"
        ></i>
      </div>
    </el-popover>
  </div>
</template>

<script>
import { elementIcons } from "@/utils/el-icons.js";
  export default {
    name: 'MyIconSelect',
    data(){
      return{
        iconList: [],
        whichIcon: ""
      }
    },
    created() {
      this.getIcons();
    },
    methods: {
      getIcons() {
        this.iconList = elementIcons;
      },
      setIcon(icon) {
        this.whichIcon = icon;
        this.$emit("selecticon",icon)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .iconList {
    width: 430px;
    height: 330px;
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    justify-content:space-around;
    flex-wrap: wrap;
    i {
      display: inline-block;
      width: 60px;
      height: 45px;
      color: #000;
      font-size: 20px;
      border: 1px solid #e6e6e6;
      border-radius: 4px;
      cursor: pointer;
      text-align: center;
      line-height: 45px;
      margin: 5px;
      &:hover {
        color: skyblue;
        border-color: skyblue;
      }
    }
  }

  .chooseIcons {
    width: 184px;
    height: 33px;
    line-height: 25px;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: none;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
</style>
